<!DOCTYPE html>
<html lang="en">
  <head>
    <title>GET VIDEO</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <input id="address" type="text" disabled />
    <input
      type="button"
      title="开启摄像头"
      value="开启摄像头"
      onclick="getMedia()"
    />
    <video id="video" width="500px" height="500px" autoplay="autoplay"></video>
    <canvas id="canvas" width="500px" height="500px"></canvas>
    <button id="snap" onclick="takePhoto()">拍照</button>
    <button id="snap" onclick="changePhoto()">切换</button>
    <div id="container"></div>
    <script
      type="text/javascript"
      src="https://webapi.amap.com/maps?v=1.4.15&key=a0f264f36b089e8815d65f3c3602de72"
    ></script>
    <script>
      let front = false;
      let num = 1;
      let position = document.getElementById("demo");
      let lat = 0;
      let lag = 0;
      function getMedia() {
        getLocation();
        let constraints = {
          video: {
            width: 500,
            height: 500,
            facingMode: front ? "user" : "environment",
          },
          audio: true,
        };
        //获得video摄像头区域
        let video = document.getElementById("video");
        //这里介绍新的方法，返回一个 Promise对象
        // 这个Promise对象返回成功后的回调函数带一个 MediaStream 对象作为其参数
        // then()是Promise对象里的方法
        // then()方法是异步执行，当then()前的方法执行完后再执行then()内部的程序
        // 避免数据没有获取到
        let promise = navigator.mediaDevices.getUserMedia(constraints);
        promise.then(function (MediaStream) {
          video.srcObject = MediaStream;
          video.play();
        });
      }

      function takePhoto() {
        //获得Canvas对象
        let video = document.getElementById("video");
        let canvas = document.getElementById("canvas");
        let ctx = canvas.getContext("2d");
        ctx.drawImage(video, 0, 0, 500, 500);
      }
      function changePhoto() {
        front = !front;
        document.getElementById("text").innerHTML = front;
        getMedia();
      }

      function getLocation() {
        mapObj = new AMap.Map("iCenter");
        mapObj.plugin("AMap.Geolocation", function () {
          geolocation = new AMap.Geolocation({
            enableHighAccuracy: true, //是否使用高精度定位，默认:true
            timeout: 10000, //超过10秒后停止定位，默认：无穷大
            maximumAge: 0, //定位结果缓存0毫秒，默认：0
            convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
            showButton: true, //显示定位按钮，默认：true
            buttonPosition: "LB", //定位按钮停靠位置，默认：'LB'，左下角
            buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
            showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
            panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
            zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
          });
          mapObj.addControl(geolocation);
          geolocation.getCurrentPosition();
          AMap.event.addListener(geolocation, "complete", onComplete); //返回定位信息
          AMap.event.addListener(geolocation, "error", onError); //返回定位出错信息
        });
      }
      function onComplete(data) {
        console.log(data);
        document.getElementById("address").value = data.formattedAddress;
      }
    </script>
  </body>
</html>
